<template>
  <div class="singerhomepage">
    <img class="index" :src="this.bgimg" alt="" />
    <van-nav-bar>
      <template #right>
        <van-icon name="ellipsis" size="30" />
      </template>
      <template #left>
        <van-icon name="revoke" size="30" @click="back" />
      </template>
    </van-nav-bar>
    <div class="message">
      <div class="pic"><img :src="this.list1.avatarUrl" alt="" /></div>
      <ul class="one">
        <span class="name">{{ this.list1.nickname }}</span>
        <span
          ><img class="img11" v-if="this.img" :src="this.img.imageUrl" alt=""
        /></span>
        <span class="level">
          <img v-if="!this.lev == 0" src="../../assets/level.jpg" alt="" />
          <span v-if="this.lev == 1">壹</span>
          <span v-if="this.lev == 2">贰</span
          ><span v-if="this.lev == 3">叁</span
          ><span v-if="this.lev == 4">肆</span
          ><span v-if="this.lev == 5">伍</span
          ><span v-if="this.lev == 6">陆</span
          ><span v-if="this.lev == 7">柒</span
          ><span v-if="this.lev == 8">捌</span
          ><span v-if="this.lev == 9">玖</span>
          <span v-if="this.lev == 10">拾</span>
        </span>
      </ul>
      <ul class="two">
        <span class="guanzhu">{{ this.followeds }}关注</span>
        <span class="fan">{{ this.fans }}粉丝</span>
        <span v-if="!this.lev == 0" class="lev">Lv.{{ this.lev }}</span>
      </ul>
      <ul class="san">
        <span v-if="!this.img" class="place">浙江&nbsp;杭州</span>
        <span class="age">村龄{{ this.year }}年</span>
        <span v-if="this.img">{{ this.img.imageDesc }}</span>
      </ul>
      <ul class="si">
        <span class="yes">已关注</span>
        <span class="chat">聊天</span>
      </ul>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="主页" name="a">
        <div class="zhuye">
          <div class="baike">
            <p v-if="this.desc.briefDesc">艺人百科</p>
            <p v-if="!this.desc.briefDesc">基本信息</p>
            <p>
              <img v-if="this.img" :src="this.img.imageUrl" alt="" /><span
                v-if="this.img"
                >{{ this.img.imageDesc }}</span
              >
            </p>
            <p>艺人名：{{ this.list1.nickname }}</p>
            <p v-if="this.desc.briefDesc">身份：歌手、作词、作曲</p>
            <p v-if="this.desc.topicData">
              <span v-if="this.desc.topicData[0].creator.birthday > 0"
                >生日：
                {{
                  this.desc.topicData[0].creator.birthday | formatDates
                }} </span
              ><span>天秤座</span>
            </p>
            <p v-if="!this.desc.topicData">
              <span>生日： {{ this.bir | formatDates }} </span
              ><span>天秤座</span>
            </p>
            <p v-if="this.desc.briefDesc">
              歌手简介：{{ this.desc.briefDesc }}
            </p>
            <p v-if="!this.desc.briefDesc">村龄：{{ this.day }}天</p>
            <p v-if="!this.desc.briefDesc">
              个人介绍：{{ this.list1.signature }}
            </p>
            <p @click="baidu(ziliao.artistId)" v-if="this.desc.briefDesc">
              查看全部&nbsp;>
            </p>
          </div>
          <div class="baike" v-if="this.desc.briefDesc">
            <p @click="singersong(ziliao.artistId)">代表作</p>
            <div class="flex">
              <p
                @click="play(item.id)"
                class="daibiao"
                v-for="(item, index) in songss"
                :key="index"
              >
                <img v-if="item.name" :src="item.al.picUrl" alt="" /><span
                  >{{ item.name }}&nbsp;-&nbsp;{{ item.ar[0].name }}</span
                >
              </p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="动态" name="b"
        ><div class="share" v-for="(item, index) in list" :key="index">
          <!-- 发布人信息 -->
          <div class="messag">
            <div class="pic2"><img :src="item.user.avatarUrl" alt="" /></div>
            <div class="name">
              <span class="a">{{ item.user.nickname }}</span>
              <img v-if="!lev == 0" src="../../assets/level.jpg" alt="" />
              <span class="levels">
                <span v-if="lev == 1">壹</span>
                <span v-if="lev == 2">贰</span><span v-if="lev == 3">叁</span
                ><span v-if="lev == 4">肆</span><span v-if="lev == 5">伍</span
                ><span v-if="lev == 6">陆</span><span v-if="lev == 7">柒</span
                ><span v-if="lev == 8">捌</span><span v-if="lev == 9">玖</span>
                <span v-if="lev == 10">拾</span>
              </span>
              <span v-if="item.type == 35" class="song">&nbsp;分享歌单：</span>
              <span v-if="item.type == 57" class="song">&nbsp;分享单曲：</span>
              <span v-if="item.type == 18" class="song">&nbsp;分享单曲：</span>
              <p class="releaseTime">
                {{ item.eventTime | formatDates }}
              </p>
            </div>
          </div>
          <!-- 发布内容 -->
          <div class="content">
            <p>
              {{ item.json.msg }}
            </p>
            <p class="abc" v-if="item.tailMark">
              #{{ item.tailMark.markTitle }}
            </p>
            <div v-if="item.pics[0]">
              <img class="bg" :src="item.pics[0].originUrl" alt="" />
            </div>
            <div
              v-if="item.type == 18"
              class="son"
              @click="play(item.json.song.id)"
            >
              <img :src="item.json.song.img80x80" alt="" />
              <div>
                <p>{{ item.json.song.name }}</p>
                <p>{{ item.json.song.album.artists[0].name }}</p>
              </div>
            </div>
            <div
              v-if="item.type == 21"
              class="son"
              @click="shipin(item.json.mv.id)"
            >
              <img :src="item.json.mv.imgurl" alt="" />
              <div>
                <p>{{ item.json.mv.name }}</p>
                <p>{{ item.json.mv.artistName }}</p>
              </div>
            </div>
            <div class="ping">
              <van-icon name="share-o" />{{ item.fans }}
              <van-icon name="chat-o" />{{ item.pl }}
              <van-icon name="good-job-o" />{{ item.dz }}
            </div>
          </div>
        </div></van-tab
      >
      <van-tab title="播客" name="c">
        <div class="bg1">
          <p>座右铭：</p>
          <p v-if="this.zuo">{{ this.zuo }}!!!</p>
          <p v-if="!this.zuo">我是你得不到的梦</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from "axios";
import "../../assets/font-follow/vantChange.css";
import { formatDate } from "../follow/filters.js";

export default {
  data() {
    return {
      activeName: "a",
      list: [],
      fans: [],
      list1: [],
      followeds: "",
      lev: "",
      year: "",
      day: "",
      img: "",
      bgimg: "",
      zuo: "",
      id: "",
      desc: "",
      bir: "",
      songss: [],
      ziliao: {},
      // id: ["", "", "", "34504922", "", "996340", "", "", "12138269", "", ""],
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},
  filters: {
    formatDates(time) {
      var data = new Date(time);
      return formatDate(data, "yyyy-MM-dd");
    },
  },
  methods: {
    play(id) {
      this.$router.push("/playpage/" + id);
    },
    back() {
      this.$router.go(-1);
    },
    //获取歌手动态
    async sings(id) {
      const res = await axios.get(
        "http://192.168.31.27:3000/user/event?" + this.param,
        {
          params: {
            uid: id,
            limit: 5,
          },
        },
        {
          withCredentials: true,
        }
      );
      // console.log(res.data.events);
      for (let i = 0; i < 5; i++) {
        if (res.data.events[i]) {
          res.data.events[i].json = JSON.parse(res.data.events[i].json);
          res.data.events[i].pl = parseInt(Math.random() * 1000);
          res.data.events[i].dz = parseInt(Math.random() * 1000);
          res.data.events[i].lev = parseInt(Math.random() * 10 + 1);
          if (i == 4) {
            this.list1 = res.data.events[0].user;
            this.fans = parseInt(Math.random() * 10000 + 10000);
            this.followeds = parseInt(Math.random() * 100);
          }
        }
      }
      this.list = res.data.events;
    },

    //获取关注用户详情
    async level(id) {
      const res = await axios.get(
        "http://192.168.31.27:3000/user/detail?uid=" + id,
        {
          withCredentials: true,
        }
      );
      // console.log(res.data.profile);
      this.ziliao = res.data.profile;
      // console.log(this.ziliao);
      this.bir = res.data.profile.birthday;
      this.id = res.data.profile.artistId;
      this.lev = res.data.level;
      this.day = res.data.createDays;
      this.year = Math.ceil(res.data.createDays / 365);
      this.img = res.data.identify;
      this.bgimg = res.data.profile.backgroundUrl;
      this.zuo = res.data.profile.signature;
      //获取关注歌手详情
      const res1 = await axios.get(
        "http://192.168.31.27:3000/artist/desc?id=" + this.id,
        {
          withCredentials: true,
        }
      );
      // 获取关注歌手简介
      this.desc = res1.data;
      const res2 = await axios.get(
        "http://192.168.31.27:3000/artist/detail?id=" + this.id,
        {
          withCredentials: true,
        }
      );
      // console.log(res2);
      this.desc = res1.data;
      // 获取关注歌手歌单
      const res3 = await axios.get(
        "http://192.168.31.27:3000/artists?id=" + this.id,
        {
          withCredentials: true,
        }
      );
      this.songss = res3.data.hotSongs;
      this.id = this.id;
    },
    singersong(id) {
      this.$router.push("/singersong/" + id);
    },
    baidu(id) {
      this.$router.push("/singerBD/" + id);
    },
  },
  created() {
    const id = this.$route.params.id;
    this.sings(id);
    this.level(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.zhuye {
  background-color: #fff;
  padding-top: 20px;
  text-align: center;
  padding-bottom: 200px;
}
.baike {
  display: inline-block;
  /* border: 2px solid #000; */
  border-radius: 30px;
  padding: 10px;
  width: 300px;
  background-color: rgb(214, 205, 205);
  margin-bottom: 20px;
}
.baike p:nth-child(1) {
  font-size: 25px;
  color: #fff;
  /* font-weight: bold; */
  margin-left: 15px;
  margin-top: 10px;
}
.baike .daibiao {
  border-radius: 15px;
  padding: 10px;
  background-color: rgb(200, 205, 205);
  width: 250px;
  height: 50px;
  text-align: center;
  display: inline-block;
  overflow-x: scroll;
}
.flex {
  overflow-x: scroll;
  white-space: nowrap;
  width: 250px;
}
.baike .flex .daibiao img {
  width: 45px;
  vertical-align: middle;
  border-radius: 10px;
  margin-right: 10px;
  margin-top: 0;
}
.baike .flex .daibiao span {
  font-size: 25px;
  color: aliceblue;
}
.baike p {
  text-align: left;
  line-height: 25px;
}
.baike p:nth-child(2) {
  line-height: 25px;
}
.baike p:nth-child(2) img {
  margin-left: 11px;
  margin-top: 15px;
  width: 20px;
  vertical-align: text-bottom;
}
.baike p:nth-child(2) span {
  margin-left: 5px;
  color: aliceblue;
  font-size: 20px;
}
.baike p:nth-child(2) {
  margin-left: 15px;
  margin-top: 15px;
  color: aliceblue;
  font-size: 20px;
}
.baike p:nth-child(3) {
  color: aliceblue;
  font-size: 20px;
  margin: 10px 0 0 20px;
}
.baike p:nth-child(4) {
  color: aliceblue;
  font-size: 20px;
  margin: 5px 0 0 20px;
}
.baike p:nth-child(5) {
  color: aliceblue;
  font-size: 20px;
  margin: 5px 0 0 20px;
}
.baike p:nth-child(5) span:nth-child(1) {
  margin: 0 5px 0 0px;
}
.baike p:nth-child(6) {
  color: aliceblue;
  font-size: 20px;
  margin: 5px 0 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.baike p:nth-child(7) {
  text-align: center;
  color: aliceblue;
  font-size: 19px;
  margin-top: 10px;
}
.index {
  position: absolute;
  z-index: -1;
  width: 100%;
}
.singerhomepage {
  background-image: url(../../assets/sea.webp);
  height: 896px;
  opacity: 0.9;
}
.bg1 {
  text-align: left;
  padding-bottom: 413px;
  background-image: url(../../assets/sea.webp);
}
.bg1 p:nth-child(1) {
  font-size: 30px;
  margin-left: 40px;
  padding-top: 50px;
}
.bg1 p:nth-child(2) {
  font-size: 35px;
  margin-left: 40px;
  padding-top: 50px;
}
.singerhomepage {
  position: relative;
}
.singerhomepage .message {
  text-align: center;
  background-color: #fff;
  border-radius: 15px;
  /* width: 380px; */
  width: 90%;
  position: absolute;
  left: 18px;
  top: 150px;
  letter-spacing: 1px;
  height: 230px;
}
.img11 {
  margin-right: 5px;
  width: 20px;
}
.singerhomepage .pic img {
  position: absolute;
  top: -40px;
  /* left: 150px; */
  left: 50%;
  margin-left: -40px;
  width: 80px;
  border-radius: 80px;
}
.singerhomepage .one {
  width: 300px;
  display: inline-block;
  /* border: 2px solid; */
  margin-top: 60px;
  text-align: center;
}
.singerhomepage .one .name {
  color: #000;
  font-size: 20px;
  margin-right: 10px;
  font-weight: 600;
}
.singerhomepage .one .level img {
  border-radius: 15px;
  width: 60px;
  vertical-align: text-bottom;
}
.singerhomepage .one .level {
  position: relative;
}
.singerhomepage .one .level span {
  font-size: 13px;
  position: absolute;
  top: 1.5px;
  right: 4px;
  color: #fbebeb;
}
.singerhomepage .two {
  color: gray;
  margin-top: 10px;
}
.singerhomepage .two span {
  display: inline-block;
  width: 100px;
  border-right: 1px solid gray;
}
.singerhomepage .two span:nth-child(3) {
  border-right: none;
}
.singerhomepage .san {
  margin-top: 10px;
  color: #000;
}
.singerhomepage .bg {
  width: 80px;
}
.singerhomepage .san span:nth-child(1) {
  width: 80px;
}
.singerhomepage .san span {
  margin-left: 10px;
  display: inline-block;
  /* width: 140px; */
  height: 28px;
  padding: 5px;
  line-height: 28px;
  border: 2px solid #e6e6e6;
  border-radius: 10px;
}
.singerhomepage .san span:nth-child(1) {
  margin-right: 5px;
}
.singerhomepage .si {
  margin-top: 15px;
}
.singerhomepage .si .yes {
  background-color: #f3f3f3;
  display: inline-block;
  width: 100px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  margin-right: 7px;
  font-size: 17px;
  font-weight: 600;
  color: #929292;
}
.singerhomepage .si .chat {
  background-color: #fe3a3b;
  display: inline-block;
  width: 100px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #e6e6e6;
  border-radius: 15px;
  font-weight: 600;
  color: #fff;
}
.singerhomepage .van-tab__pane {
  background-color: #fff;
}
.singerhomepage .share {
  border-radius: 20px;
  padding-top: 20px;
  background-color: #fff;
  padding-bottom: 10px;
}
.singerhomepage .abc {
  margin-top: 10px;
  margin-bottom: 9px;
  font-size: 16px;
  color: aqua;
}
</style>
